<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        .main {
        	background-color: #fff;
        }
        .main ul li {
        	padding: 0 15px;
        }
        .li_box {
        	height: 50px;
        	line-height: 50px;
			border-bottom: 1px solid #e8e8e8;
            position: relative;
        }
        .main ul li:last-child .li_box {
        	border-bottom: none;
        }
        .main ul li .li_box input {
        	width: 100%;
        	height: 100%;
        	color: #999;
        	font-size: 14px;
        	background-repeat: no-repeat;
        	background-size: 15px auto;
        	background-position: left center;
        	padding-left: 55px;
        	box-sizing: border-box;
        }
        .main ul li .li_box input::-webkit-input-placeholder {
        	color: #999;
            padding-top: 3px;
        }
        .main ul li:nth-child(1) input {
        	background-image: url('../image/login_icon1.png');
        }
        .main ul li:nth-child(2) input {
        	background-image: url('../image/login_icon2.png');
        }
        .forgot_password_box {
        	overflow: hidden;
        }
        .forgot_password_box .forgot_password {
        	float: right;
        	font-size: 13px;
        	color: #999;
        	padding: 10px 15px;
        }
        .btn_box {
        	margin-top: 15px;
        	padding: 0 15px;
        }
        .btn_box .btn {
        	height: 40px;
        	line-height: 40px;
        	background-color: #e62442;
        	color: #fff;
        	text-align: center;
        	border-radius: 5px;
        	font-size: 16px;
        }
        .btn_box .register {
        	background-color: transparent;
        	color: #e62442;
        	margin-top: 22px;
        }
        .btn_box .apply {
        	background-color: transparent;
        	color: #e62442;
        	margin-top: 22px;
        	display: none;
        }
        .other_login {
        	margin-top: 45px;
        }
        .other_login .other_login_t {
        	display: -webkit-box;
        	-webkit-box-align: center;
        	-webkit-box-pack: center;
        }
        .other_login .other_login_t .line {
        	width: 79px;
        	height: 1px;
        	background-color: #999;
        }
        .other_login .other_login_t .title_p {
        	font-size: 13px;
        	color: #999;
        	padding: 0 9px;
        }
        .other_login .other_login_b {
        	margin-top: 32px;
        	overflow: hidden;
        	padding: 0 82px;
        }
        .other_login .other_login_b .facebook_icon {
        	width: 35px;
        	float: left;
        }
        .other_login .other_login_b .wechat_icon {
        	width: 42px;
        	float: right;
        }
        .pre_num{
            position: absolute;
            top: 0;
            left: 20px;
            line-height: 50px;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="main">
    	<ul>
    		<li>
    			<div class="li_box">
                    <span class="pre_num">+60</span>
    				<input class="phone" type="tel" placeholder="请输入手机号">
    			</div>
    		</li>
    		<li>
    			<div class="li_box">
    				<input class="password" type="password" placeholder="请输入密码">
    			</div>
    		</li>
    	</ul>
    </div>
    <div class="forgot_password_box">
    	<div class="forgot_password" onclick="fnForgetPassword();" tapmode>忘记密码</div>
    </div>
    <div class="btn_box">
    	<div class="btn" onclick="login();" tapmode>登录</div>
    	<!-- <div class="btn register" onclick="fnRegister();" tapmode>注册账号</div> -->
    	<!-- <div class="btn apply">申请成为骑手</div> -->
    </div>
    <div class="other_login">
    	<!-- <div class="other_login_t">
    		<div class="line"></div>
    		<div class="title_p">第三方登录</div>
    		<div class="line"></div>
    	</div> -->
  <!--   	<div class="other_login_b">
    		<img class="facebook_icon" src="../image/facebook_icon.png">
    		<img class="wechat_icon" src="../image/wechat_icon.png">
    	</div> -->
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    apiready = function(){

        var temp_phone = $api.getStorage('temp_phone');
        if(temp_phone){
            $(".phone").val(temp_phone);
        }

        api.addEventListener({
            name: 'toDoLogin'
        }, function(ret, err) {
            if (ret) {
                login();
            } 
        });
        
    };

    //登录
    function login () {
        $("input").blur();
        var phone = '60' + $('.phone').val();
        var password = $('.password').val();
        if (isMobile(phone) == 0) {
            api.toast({
                msg: '手机号格式错误',
                location : "middle"
            });
            return;
        }
        if (!$('.password').val()) {
            api.toast({
                msg: '请输入密码',
                location : "middle"
            });
            return;
        }
        openLoading();
        api.ajax({
            url: rootPath+'/api/staff/login',
            method: 'post',
            data: {
                values: { 
                    phone : phone,
                    password : password
                },
            }
        },function(ret, err){
            if(ret.status == 201){
                toast(ret.msg);
            }else if(ret.status == 200){
                // 登录成功
                toast('登录成功');
                $api.setStorage('staff_data', ret.data);
                $api.setStorage('temp_phone', $('.phone').val());
                api.sendEvent({
                    name: 'loginSuccess',
                });
                // 登录成功重新连socket
                api.sendEvent({
                    name: 'reloadSocketEvent',
                });
                setTimeout(function(){
                    // api.closeWin();
                    api.closeToWin({
                        name: 'root'
                    });
                },300);
            }
            closeLoading();
        });
    }




    function fnForgetPassword() {
        api.openWin({
            name: 'forgot_password',
            url: './forgot_password.html',
        });
    }

    
</script>
</html>